<template>
  <!--  入口-->
  <main class="main-entrance">
    <!--  头部-->
    <MyHeader/>
    <!--头部提示信息-->
    <header>
      <i class="iconfont icon-wenbenbianji"></i>
      <h1>申请信息</h1>
    </header>

    <!-- 主体信息-->
    <div class="content">
      <!--  头-->
      <div class="content-header">
        <span>统计:&nbsp;&nbsp;用款次数:&nbsp;&nbsp;2次</span>
        <p>用款次数:&nbsp;&nbsp;100000.00次</p>
      </div>
      <!--  echarts数据列表-->
      <div class="echarts-list">
        <div class="echarts" id="mychart"></div>
        <div class="echarts2" id="mychart2"></div>
        <div class="content-new" @click="newInformation">
          <div class="new-button">
            <i class="iconfont icon-new"></i>
            <p>新建</p>
          </div>
        </div>
      </div>

<!--  日期选择-->
      <div class="option-date">
   <!--   年-->
        <div class="unified-style" @click="togglestate('year')" unselectable="on" onselectstart="return false;">
          <p v-cloak style="font-size: 14px">{{currentyear}}</p>
        <!--点击时状态切换为ture,箭头向上-->
          <i :class="[isyear?'el-icon-top':'el-icon-bottom']"></i>
        </div>
        <!--          下拉列表-->
        <div class="drop-down-list-year" v-show="isyear" v-cloak>
          <ul>
            <li v-for="(item,index) in yearlist" :key="item.index" @click="getpitchonyears(item.value)">
              <span>{{item.value}}</span>
            </li>
          </ul>
        </div>
        <span>年</span>


   <!-- 月-->
        <div class="unified-style" @click="togglestate('month')" unselectable="on" onselectstart="return false;">
          <p v-cloak style="font-size: 14px">{{presentmonth}}</p>
          <!--点击时状态切换为ture,箭头向上-->
          <i :class="[ismonth?'el-icon-top':'el-icon-bottom']"></i>
        </div>
        <!--          下拉列表-->
        <div class="drop-down-list-month" v-show="ismonth" v-cloak>
          <ul>
            <li v-for="(item,index) in monthlist" :key="item.index" @click="getpresentmonth(item.value)">
              <span>{{item.value}}</span>
            </li>
          </ul>
        </div>
        <span>月</span>

        <!--   审核状态-->
        <div class="unified-style" @click="togglestate('presentstats')" unselectable="on" onselectstart="return false;">
          <p v-cloak style="font-size: 14px">{{presentstats}}</p>
          <!--点击时状态切换为ture,箭头向上-->
          <i :class="[isstats?'el-icon-top':'el-icon-bottom']"></i>
        </div>
        <!--          下拉列表-->
        <div class="drop-down-list-reviewstatus" v-show="isstats" v-cloak>
          <ul>
            <li v-for="(item,index) in reviewstatus" :key="item.index" @click="getreviewstatus(item.value)">
              <span>{{item.value}}</span>
            </li>
          </ul>
        </div>
        <span>状态</span>

<!--   查询按钮-->
        <div class="inquire" @click="getOrderStats">
            <span>查询</span>
        </div>
      </div>


    </div>
    <!-- 状态列表 -->
    <div class="state-list">

       <!--多个div用来状态切换-->
      <!--    待提交状态内容-->
      <div class="tosubmit" v-show="notarizestats=='待提交'">
        <!--   头部id等-->
        <header>
          <span class="id">ID:</span>
          <span class="idnumber">5954864664</span>
        </header>
      <!-- 头部信息-->
        <div class="top-info">
          <el-row :gutter="2" type="flex">
            <!--第一个圆角 左圆角   first-Rounded -->
            <el-col :span="3"><div class="grid-content bg-purple first-Rounded">
              <span>用款类型</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>贷款银行/担保银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>申请金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>批准金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>用款时间</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>放款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>还款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>当前状态</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple last-Rounded">
              <span>操作</span>
            </div></el-col>
          </el-row>
        </div>
       <!--具体信息-->
        <div class="content-info">
          <el-row :gutter="2" type="flex">
            <!--   针对elementui的自定义样式-->
            <!--第一个圆角 左圆角   first-Rounded 高度样式 info-height 居中 middle  flex布局 layout-->
            <el-col :span="3"><div class="grid-content bg-purple bottom-first-Rounded info-height middle">
              <span>还本续贷</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>xxxxxx银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/30</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/29</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/12/30</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>待提交</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple bottom-last-Rounded info-height middle layout">
<!--              <span class="info-submit">-->
<!--                <i>提交</i>-->
<!--              </span>-->
              <complete-submission class="not-middle"/>
            </div></el-col>
          </el-row>
        </div>
        <!--低部进度-->
        <div class="bottom-progressof">
          <el-button type="primary" round class="to-submit-buttom">提交申请</el-button>
          <img src="@/assets/images/right -instructions.png" height="56px" width="56px"/>
          <el-button type="primary" round>服务中心初审</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px" class="not-indicate"/>
          <el-button type="primary" round>复审审核</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>放款/还款</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>结束</el-button>
        </div>
      </div>
      <!--    待审核状态内容-->
      <div class="to-audit" v-show="notarizestats=='待审核'">
        <!--   头部id等-->
        <header>
          <span class="id">ID:</span>
          <span class="idnumber">5954864664</span>
        </header>
        <!-- 头部信息-->
        <div class="top-info">
          <el-row :gutter="2" type="flex">
            <!--第一个圆角 左圆角   first-Rounded -->
            <el-col :span="3"><div class="grid-content bg-purple first-Rounded">
              <span>用款类型</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>贷款银行/担保银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>申请金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>批准金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>用款时间</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>放款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>还款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>当前状态</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple last-Rounded">
              <span>操作</span>
            </div></el-col>
          </el-row>
        </div>
        <!--具体信息-->
        <div class="content-info">
          <el-row :gutter="2" type="flex">
            <!--   针对elementui的自定义样式-->
            <!--第一个圆角 左圆角   first-Rounded 高度样式 info-height 居中 middle  flex布局 layout-->
            <el-col :span="3"><div class="grid-content bg-purple bottom-first-Rounded info-height middle">
              <span>还本续贷</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>xxxxxx银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/30</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/29</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/12/30</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>待审核</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple bottom-last-Rounded info-height middle layout">
              <span class="info-submit">
                <preliminary-review-materials/>
<!--                <i>查看</i>-->
              </span>
            </div></el-col>
          </el-row>
        </div>
        <!--低部进度-->
        <div class="bottom-progressof">
          <el-button type="primary" round >提交申请</el-button>
          <img src="@/assets/images/right -instructions.png" height="56px" width="56px"/>
          <el-button type="primary" round class="to-submit-buttom">服务中心初审</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px" class="not-indicate"/>
          <el-button type="primary" round>复审审核</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>放款/还款</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>结束</el-button>
        </div>
      </div>
       <!--    待还款状态内容  -->
      <div class="for-reimbursement" v-show="notarizestats=='待还款'">
        <!--   头部id等-->
        <header>
          <span class="id">ID:</span>
          <span class="idnumber">5954864664</span>
        </header>
        <!-- 头部信息-->
        <div class="top-info">
          <el-row :gutter="2" type="flex">
            <!--第一个圆角 左圆角   first-Rounded -->
            <el-col :span="3"><div class="grid-content bg-purple first-Rounded">
              <span>用款类型</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>贷款银行/担保银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>申请金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>批准金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>用款时间</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>放款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>还款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>当前状态</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple last-Rounded">
              <span>操作</span>
            </div></el-col>
          </el-row>
        </div>
        <!--具体信息-->
        <div class="content-info">
          <el-row :gutter="2" type="flex">
            <!--   针对elementui的自定义样式-->
            <!--第一个圆角 左圆角   first-Rounded 高度样式 info-height 居中 middle  flex布局 layout-->
            <el-col :span="3"><div class="grid-content bg-purple bottom-first-Rounded info-height middle">
              <span>还本续贷</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>xxxxxx银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/30</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/29</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/12/30</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>待还款</span>
            </div></el-col>
            <el-col :span="3"><div class="bg-purple bottom-last-Rounded info-height layout">
               <payment-history/>
            </div></el-col>
          </el-row>
        </div>
        <!--低部进度-->
        <div class="bottom-progressof">
          <el-button type="primary" round >提交申请</el-button>
          <img src="@/assets/images/right -instructions.png" height="56px" width="56px"/>
          <el-button type="primary" round>服务中心初审</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px" class="not-indicate"/>
          <el-button type="primary" round>复审审核</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round class="to-submit-buttom">放款/还款</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>结束</el-button>
        </div>
      </div>
      <!--    完成状态内容  -->
      <div class="complete" v-show="notarizestats=='完成'">
        <!--   头部id等-->
        <header>
          <span class="id">ID:</span>
          <span class="idnumber">5954864664</span>
        </header>
        <!-- 头部信息-->
        <div class="top-info">
          <el-row :gutter="2" type="flex">
            <!--第一个圆角 左圆角   first-Rounded -->
            <el-col :span="3"><div class="grid-content bg-purple first-Rounded">
              <span>用款类型</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>贷款银行/担保银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>申请金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>批准金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>用款时间</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>放款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>还款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>当前状态</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple last-Rounded">
              <span>操作</span>
            </div></el-col>
          </el-row>
        </div>
        <!--具体信息-->
        <div class="content-info">
          <el-row :gutter="2" type="flex">
            <!--   针对elementui的自定义样式-->
            <!--第一个圆角 左圆角   first-Rounded 高度样式 info-height 居中 middle  flex布局 layout-->
            <el-col :span="3"><div class="grid-content bg-purple bottom-first-Rounded info-height middle">
              <span>还本续贷</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>xxxxxx银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/30</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/29</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/12/30</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>完成</span>
            </div></el-col>
            <el-col :span="3"><div class=" bg-purple bottom-last-Rounded info-height  layout">
              <review-materials-guarantee/>
            </div></el-col>
          </el-row>
        </div>
        <!--低部进度-->
        <div class="bottom-progressof">
          <el-button type="primary" round >提交申请</el-button>
          <img src="@/assets/images/right -instructions.png" height="56px" width="56px"/>
          <el-button type="primary" round>服务中心初审</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px" class="not-indicate"/>
          <el-button type="primary" round>复审审核</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>放款/还款</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round class="to-submit-buttom">结束</el-button>
        </div>
      </div>
      <!--    拒绝状态内容  -->
      <div class="refusedto" v-show="notarizestats=='拒绝'">
        <!--   头部id等-->
        <header>
          <span class="id">ID:</span>
          <span class="idnumber">5954864664</span>
        </header>
        <!-- 头部信息-->
        <div class="top-info">
          <el-row :gutter="2" type="flex">
            <!--第一个圆角 左圆角   first-Rounded -->
            <el-col :span="3"><div class="grid-content bg-purple first-Rounded">
              <span>用款类型</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>贷款银行/担保银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>申请金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>批准金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>用款时间</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>放款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>还款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>当前状态</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple last-Rounded">
              <span>操作</span>
            </div></el-col>
          </el-row>
        </div>
        <!--具体信息-->
        <div class="content-info">
          <el-row :gutter="2" type="flex">
            <!--   针对elementui的自定义样式-->
            <!--第一个圆角 左圆角   first-Rounded 高度样式 info-height 居中 middle  flex布局 layout-->
            <el-col :span="3"><div class="grid-content bg-purple bottom-first-Rounded info-height middle">
              <span>还本续贷</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>xxxxxx银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/30</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/29</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/12/30</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>拒绝</span>
            </div></el-col>
            <el-col :span="3"><div class=" bg-purple bottom-last-Rounded info-height layout">
              <review-materials-bank/>
            </div></el-col>
          </el-row>
        </div>
        <!--低部进度-->
        <div class="bottom-progressof">
          <el-button type="primary" round>提交申请</el-button>
          <img src="@/assets/images/right -instructions.png" height="56px" width="56px"/>
          <el-button type="primary" round class="refused-to">服务中心初审</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px" class="not-indicate"/>
          <el-button type="primary" round>复审审核</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>放款/还款</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>结束</el-button>
        </div>
      </div>
      <!--    延期还款状态内容  -->
      <div class="deferred-payment" v-show="notarizestats=='延期还款'">
        <!--   头部id等-->
        <header>
          <span class="id">ID:</span>
          <span class="idnumber">5954864664</span>
        </header>
        <!-- 头部信息-->
        <div class="top-info">
          <el-row :gutter="2" type="flex">
            <!--第一个圆角 左圆角   first-Rounded -->
            <el-col :span="3"><div class="grid-content bg-purple first-Rounded">
              <span>用款类型</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>贷款银行/担保银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>申请金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>批准金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>用款时间</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>放款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>还款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>当前状态</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple last-Rounded">
              <span>操作</span>
            </div></el-col>
          </el-row>
        </div>
        <!--具体信息-->
        <div class="content-info">
          <el-row :gutter="2" type="flex">
            <!--   针对elementui的自定义样式-->
            <!--第一个圆角 左圆角   first-Rounded 高度样式 info-height 居中 middle  flex布局 layout-->
            <el-col :span="3"><div class="grid-content bg-purple bottom-first-Rounded info-height middle">
              <span>还本续贷</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>xxxxxx银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/30</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/29</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/12/30</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>延期</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple bottom-last-Rounded info-height middle layout">
              <span class="info-submit">
                <i>查看</i>
              </span>
            </div></el-col>
          </el-row>
        </div>
        <!--低部进度-->
        <div class="bottom-progressof">
          <el-button type="primary" round >提交申请</el-button>
          <img src="@/assets/images/right -instructions.png" height="56px" width="56px"/>
          <el-button type="primary" round>服务中心初审</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px" class="not-indicate"/>
          <el-button type="primary" round>复审审核</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round class="to-submit-buttom">放款/还款</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>结束</el-button>
        </div>
      </div>
      <!--    风险处置状态内容  -->
      <div class="risk-management" v-show="notarizestats=='风险处置'">
        <!--   头部id等-->
        <header>
          <span class="id">ID:</span>
          <span class="idnumber">5954864664</span>
        </header>
        <!-- 头部信息-->
        <div class="top-info">
          <el-row :gutter="2" type="flex">
            <!--第一个圆角 左圆角   first-Rounded -->
            <el-col :span="3"><div class="grid-content bg-purple first-Rounded">
              <span>用款类型</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>贷款银行/担保银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>申请金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>批准金额</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>用款时间</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>放款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>还款时间</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <span>当前状态</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple last-Rounded">
              <span>操作</span>
            </div></el-col>
          </el-row>
        </div>
        <!--具体信息-->
        <div class="content-info">
          <el-row :gutter="2" type="flex">
            <!--   针对elementui的自定义样式-->
            <!--第一个圆角 左圆角   first-Rounded 高度样式 info-height 居中 middle  flex布局 layout-->
            <el-col :span="3"><div class="grid-content bg-purple bottom-first-Rounded info-height middle">
              <span>还本续贷</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>xxxxxx银行</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>100000.00</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/30</span>
            </div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/10/29</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>2021/12/30</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple info-height middle">
              <span>风险处置</span>
            </div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple bottom-last-Rounded info-height middle layout">
              <span class="info-submit">
                <i>查看</i>
              </span>
            </div></el-col>
          </el-row>
        </div>
        <!--低部进度-->
        <div class="bottom-progressof">
          <el-button type="primary" round >提交申请</el-button>
          <img src="@/assets/images/right -instructions.png" height="56px" width="56px"/>
          <el-button type="primary" round>服务中心初审</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px" class="not-indicate"/>
          <el-button type="primary" round>复审审核</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round class="to-submit-buttom">放款/还款</el-button>
          <img src="@/assets/images/right -instructions-false.png" height="56px" width="56px"/>
          <el-button type="primary" round>结束</el-button>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import MyHeader from "@/components/header/header";
import CompleteSubmission from "@/views/home/application-information/complete-submission/complete-submission.vue"
import PreliminaryReviewMaterials from "@/views/home/application-information/preliminary-review-materials/preliminary-review-materials.vue"
import PaymentHistory from "@/views/home/application-information/payment-history/payment-history.vue"
import ReviewMaterialsGuarantee from "@/views/home/application-information/review-materials-guarantee/review-materials-guarantee.vue"
import ReviewMaterialsBank from "@/views/home/application-information/review-materials-bank/review-materials-bank.vue"
// import * as echarts from "echarts";
export default {
  components: {MyHeader,CompleteSubmission,PreliminaryReviewMaterials,PaymentHistory,ReviewMaterialsGuarantee,ReviewMaterialsBank},
  data(){
    return{
      //图标切换按钮
      iconstate:false,
      //当前年份
      currentyear:'2022',
      //当前月份
      presentmonth:'9',
      //当前状态
      presentstats:'待提交',
      //年标识符
      isyear:false,
      //月标识符
      ismonth:false,
      //状态标识符
      isstats:false,
      //确认状态(仅为实现功能)
      notarizestats:'待提交',
      //年份本地数据
      yearlist:[
        {
          value:2020
        },
        {
          value:2019
        },
        {
          value:2018
        }
      ],
      //月份本地数据
      monthlist:[
        {
          value:1
        },
        {
          value:2
        },
        {
          value:3
        },
        {
          value:4
        }
      ],
      //审核状态本地数据
      reviewstatus:[
        {
          value:"待提交"
        },
        {
          value:"待审核"
        },
        {
          value:"待还款"
        },
        {
          value:"完成"
        },
        {
          value:"拒绝"
        },
        {
          value:"延期还款"
        },
        {
          value:"风险处置"
        }
      ]
    }

  },

  methods: {
    //第一个Echarts数据
    getEcharts() {
      const setEchartWH = { //设置控制图表大小变量
        width: 530,
        height: 276
      };
      const myChart = this.echarts.init(
          document.getElementById("mychart"),
          null,
          setEchartWH
      );
      //图表数据
      const data = [
        {name: "当年发放资金", value: 20000, itemStyle: {color: '#3C90F7'}},
        {name: "当年还款资金", value: 20000, itemStyle: {color: '#55BFC0'}}
      ]

      const option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          icon: "circle",
          orient: 'vertical',
          //调整图例位置
          right: '10%',
          itemGap: 20,
          itemWidth: 14,
          itemHeight: 14,
          top: 'center',
          textStyle: {
            fontSize:14,
            color: '#000'
          },
          formatter(name) {
            let total = 0
            let value = 0
            data.forEach((item) => {
              total += item.value
              if (item.name === name) {
                value = item.value
              }
            })
            let p = ((value / total) * 100).toFixed(1)
            console.log(p)
            return [`${name}   ` + p +'%'+'   ' + value]
          }
        },

        series: [
          {
            type: 'pie',
            radius: ['60%', '74%'],
            //调整图表位置
            center:['25%','50%'],
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                formatter: '{info|当年}' + '\n\r' + '{size|40000}',
                position: 'center',
                borderRadius: 4,
                rich: {
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  },
                  info: {
                    fontSize: 16,
                    color: '#C9C9C9',
                    lineHeight: 80,
                  },
                  size: {
                    fontSize: 18,
                  }
                },
              },
              emphasis: {//中间文字显示
                show: true,
              },
            },
            data: data
          },
        ]
      };

      myChart.setOption(option);
    },
    //第二个Echarts数据
    getEcharts2() {
      const setEchartWH = { //设置控制图表大小变量
        width: 530,
        height: 220
      };
      const myChart = this.echarts.init(
          document.getElementById("mychart2"),
          null,
          setEchartWH
      );
      //图表数据
      const data = [
        {name: "申请次数:", value:2, itemStyle: {color: '#3C90F7'}},
        {name: "放款次数:", value: 2, itemStyle: {color: '#3C90F7',}},
      ]

      const option = {
        tooltip: {
          trigger: 'item',
        },

        legend: {
          //去除图例图形
          icon: "none",
          orient: 'vertical',
          //调整图例位置
          right: '10%',
          itemGap: 20,
          itemWidth: 14,
          itemHeight: 14,
          top: 'center',
          textStyle: {
            fontSize:15,
            color: '#000'
          },
          formatter(name) {
            let total = 0
            let value = 0
            data.forEach((item) => {
              total += item.value
              if (item.name === name) {
                value = item.value
              }
            })
            return [`${name}   ` + value + '   ']
          },

        },

        series: [
          {
            type: 'pie',
            //内圈，外圈
            radius: ['95%','98%'],
            //调整图表位置
            center:['40%','50%'],
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                formatter: '{proportion|100%}' + '\n\r',
                show: true,
                position: 'center',
                borderRadius: 4,
                rich: {

                  //占比死数据
                  proportion:{
                    fontSize: 26,
                    color: '#499DF8',
                    fontWeight: "bolder",
                    lineHeight:80
                  },
                },
              },
              emphasis: {//中间文字显示
                show: true,
              },
            },
            data: data
          },
        ]
      };

      myChart.setOption(option);
    },
  //新建按钮(跳转推荐合作机构)
    newInformation(){
      this.$router.push('/home/recommend-cooperation-mechanism')
    },
  //箭头图标切换
    togglestate(value){
      let result='';
      //判断是年份还是月份
      if(value==='year'){
        this.isyear=!this.isyear;
        //关闭月份
        this.ismonth=false;
        //关闭审核对话框
        this.isstats=false;
      }else if(value==='month'){
        this.ismonth=!this.ismonth;
        //关闭年份
        this.isyear=false;
        //关闭审核对话框
        this.isstats=false;
      }else {
        this.isstats=!this.isstats;
        //判断选择审核状态时，年月选择框是否打开
        if(this.isyear){
          this.isyear=false;
        }else {
          this.ismonth=false;
        }
      }
    },
  //当前选中年
    getpitchonyears(value){
      console.log(value);
      this.currentyear=value;
      this.isyear=!this.isyear;

    },
    //当前选中月
    getpresentmonth(value){
      console.log(value);
      this.presentmonth=value;
      this.ismonth=!this.ismonth;
    },
    //当前选择审核状态
    getreviewstatus(value){
      console.log(value);
      this.presentstats=value;
      this.isstats=!this.isstats;

    },
    //查询订单状态
    getOrderStats(){
      //存储值，切换状态
      this.notarizestats=this.presentstats;
      console.log(this.notarizestats);
    }
  },
  //dom元素加载完成
  mounted() {
    this.getEcharts();
    this.getEcharts2();
    //水印
    this.watermark.set("张万志");
  },
  //计算属性
  computed:{
    //获取当前日期
    getCurrentYear:function(){
      var myDate = new Date();
      var tYear = myDate.getFullYear();
       return tYear;
    },



  }
}

</script>

<style lang="less" scoped>
@import "./application-information.less";
</style>
